<template>
  <div
    class="w-full h-full bg-[url('@/assets/images/background.webp')] bg-no-repeat bg-[100%] flex flex-col"
    v-if="!isLoading"
  >
    <ChatHeader />
    <div class="mt-[40px] px-[40px] flex justify-around">
      <Card v-for="(item, index) in chartData.cardData" :key="index" v-bind="{ ...item }" />
    </div>
    <div class="flex-1 flex m-4">
      <!-- 左 -->
      <div class="flex-1 flex flex-col">
        <!-- 柱状图 -->
        <div class="flex-1 rounded-lg bg-[#eee] bg-opacity-[0.3] p-4">
          <BarChart :datas="chartData.barData" />
        </div>
        <!-- 象形柱状图 -->
        <div class="flex-1 rounded-lg mt-4 bg-[#eee] bg-opacity-[0.3] p-4">
          <PictorialBarChart :datas="chartData.pictorialBarData" />
        </div>
      </div>
      <!-- 中 -->
      <div class="w-1/2 bg-[#eee] bg-opacity-[0.3] p-4 mx-4 rounded-lg">
        <!-- 飞线图 -->
        <ChinaMapChart :datas="chinaMapData" :geoJSONData="geoJSONData" />
      </div>
      <!-- 右 -->
      <div class="flex-1 flex flex-col">
        <!-- 折线图 -->
        <div class="flex-1 rounded-lg bg-white bg-opacity-[0.3] p-4">
          <LineChart :datas="chartData.lineData" />
        </div>
        <!-- 词云图 -->
        <div class="flex-1 rounded-lg mt-4 bg-white bg-opacity-[0.3] p-4">
          <WordcloudChart :datas="chartData.wordcloudData" />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import ChatHeader from "./components/chat-header.vue";
import Card from "./components/card.vue";
import BarChart from "./components/bar-chart.vue";
import PictorialBarChart from "./components/pictorial-bar-chart.vue";
import LineChart from "./components/line-chart.vue";
import WordcloudChart from "./components/wordcloud-chart.vue";
import ChinaMapChart from "./components/china-map-chart.vue";
import { getChartsApi, getGeoJSONApi, getChinaDataApi } from "~/api/chart/index";

const isLoading = ref(false);
const chartData = ref();
const geoJSONData = ref();
const chinaMapData = ref();

const getChartsData = async () => {
  const { data } = await getChartsApi();
  chartData.value = data;
};
const getGeoJSONData = async () => {
  const { data } = await getGeoJSONApi();
  geoJSONData.value = data;
};
const getChinaData = async () => {
  const { data } = await getChinaDataApi();
  chinaMapData.value = data;
};
const initData = async () => {
  isLoading.value = true;
  try {
    // 执行了就不接受了 反正也是undefined的[]
    await Promise.all([getChartsData(), getGeoJSONData(), getChinaData()]);
  } catch (error) {
    console.log("🚀 ~ initData ~ error:", error);
  } finally {
    isLoading.value = false;
  }
};
initData();

const timerId = setInterval(() => {
  getChartsData();
}, 3000);

onBeforeUnmount(() => {
  clearInterval(timerId);
});
</script>

<style lang="scss" scoped></style>
